{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
    <script src=" {% static 'layui/layui.js' %}"></script>
    <script src=" {% static 'js/adddevices.js' %}"></script>
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <title>后台设备列表</title>
</head>
<body>
<table class="layui-hide" id="devices" lay-filter="table"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add" id="lay-btn-add">添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['laypage', 'table', 'form', 'layer'], function () {
        var laypage = layui.laypage
            , table = layui.table
        var form = layui.form;
        var layer = layui.layer;
        $ = layui.jquery;
        data =
            //执行一个 table 实例
            table.render({
                elem: '#devices'
                , height: 500
                , url: '/deviceslist' //数据接口
                , title: '设备表'
                , text: {none: ''}
                , page: true //开启分页
                , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                , cellMinWidth: 20
                , cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'}
                    {#, {field: "id", title: 'ID', sort: true, fixed: 'left'}#}
                    , {field: "device_name", title: '设备名'}
                    , {field: "device_type", title: '设备类型'}
                    , {field: "device_platform", title: '平台'}
                    , {field: "cpu_type", title: 'CPU类型'}
                    , {field: "mem_num", title: '内存大小'}
                    , {field: "version", title: '版本', sort: true}
                    , {field: "level", title: '高低端'}
                    , {field: "hot", title: '是否热门'}
                    , {field: "state", title: '借用状态'}
                    , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
                ]], respone: {
                    statusName: 'status',
                    statusCode: 200
                }, parseDate: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "data": res.data
                    }
                }
            });

        //监听头工具栏事件
        $('#lay-btn-add').on('click', function () {
            {#console.log('设备添加log');#}
            layer.open({
                type: 2,
                closeBtn: 1,
                title: "设备添加",
                maxin: true,
                area: ['600px', '500px'],
                scrolling: false,
                shadeClose: false,
                content: 'insertdevice',
            });
        });

        //监听行工具事件
        table.on('tool(table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            var id = data.id;//操作通过记录ID获取数据，所以通过data获取ID数据
            {#console.log('id', id);#}
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);//点击确定后，关闭layer弹出层
                    //向服务端发送删除指令
                    $.ajax({
                        type: 'GET',
                        url: '/deldevice',
                        data: {'id': id},
                        success: function (result) {
                            var code = result;
                            {#console.log('code', code);#}
                            if (code == 200) {
                                obj.del(); //删除对应行（tr）的DOM结构
                                layer.close(index);
                                layer.msg('删除成功！', {icon: 6});
                            }
                        }
                    })
                });
            } else if (layEvent === 'edit') {
                {#/**#}
                table.on('edit(table)',function (obj) {
                    var value = obj.value;//获取修改后的值
                    var field = obj.field;//获取field的字段
                });
                 {#**/#}
                layer.open({
                    type:2,
                    title:'设备编辑',
                    area:['680px','90%'],
                    moveType:1,
                    content:'/editdevice?id='+id,
                    btn:['确定','取消']
                });
                /**
                $.ajax({
                    url:'editdevice/',
                    data:value,
                    type:'post',
                });
                 **/
            }
        });


        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            , count: 100 //总页数
            , skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            , jump: function (obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页', {offset: 'b'});
                }
            }
        });

        //添加
        //  $('')
    });


</script>
</body>
</html>